<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>Vue八股文31-60 | Hexo</title>
  <meta name="description" content="31. 你工作中有没有封装比较好的组件？1网上找些好的组件  32. 说说Vue插槽的作⽤和平时开发中的应⽤？1234567插槽的作⽤:1）⽀持在⽗组件⾃定义⼦组件中的个内容2）让⼦组件更具有通⽤性，不必限定死某个内容插槽平时开发中的应⽤:1）在封装组件时，如果组件中的某个内容是动态的或不确定的，就可以使⽤插槽来代替了。2）在使⽤第三⽅库时，往往会通过使⽤插槽类⾃定义第三⽅组件中的某些内容。  3">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue八股文31-60">
<meta property="og:url" content="http://bear-peak.gitee.io/2022/12/29/Vue%E5%85%AB%E8%82%A1%E6%96%87(31-60)/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="31. 你工作中有没有封装比较好的组件？1网上找些好的组件  32. 说说Vue插槽的作⽤和平时开发中的应⽤？1234567插槽的作⽤:1）⽀持在⽗组件⾃定义⼦组件中的个内容2）让⼦组件更具有通⽤性，不必限定死某个内容插槽平时开发中的应⽤:1）在封装组件时，如果组件中的某个内容是动态的或不确定的，就可以使⽤插槽来代替了。2）在使⽤第三⽅库时，往往会通过使⽤插槽类⾃定义第三⽅组件中的某些内容。  3">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-12-29T06:48:08.998Z">
<meta property="article:modified_time" content="2022-12-29T08:11:03.475Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
  <!-- Canonical links -->
  <link rel="canonical" href="http://bear-peak.gitee.io/2022/12/29/Vue%E5%85%AB%E8%82%A1%E6%96%87(31-60)/index.html">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  
  
  
<meta name="generator" content="Hexo 6.3.0"></head>


<body class="main-center" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="https://github.com/cofess" target="_blank">
          <img class="img-circle img-rotate" src="/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">熊峰</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">Web Developer &amp; Designer</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> Wuhan, China</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav ">
        
        
        <li class="menu-item menu-item-home">
          <a href="/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">首页</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">归档</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">分类</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">标签</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-repository">
          <a href="/repository">
            
            <i class="icon icon-project"></i>
            
            <span class="menu-title">项目</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-books">
          <a href="/books">
            
            <i class="icon icon-book-fill"></i>
            
            <span class="menu-title">书单</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-links">
          <a href="/links">
            
            <i class="icon icon-friendship"></i>
            
            <span class="menu-title">友链</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-about">
          <a href="/about">
            
            <i class="icon icon-cup-fill"></i>
            
            <span class="menu-title">关于</span>
          </a>
        </li>
        
      </ul>
      
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/cofess" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="http://weibo.com/cofess" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://twitter.com/iwebued" target="_blank" title="Twitter" data-toggle=tooltip data-placement=top><i class="icon icon-twitter"></i></a></li>
        
        <li><a href="https://www.behance.net/cofess" target="_blank" title="Behance" data-toggle=tooltip data-placement=top><i class="icon icon-behance"></i></a></li>
        
        <li><a href="/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">公告</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>欢迎交流与分享经验!</p>
            </div>
        </div>
    </div>
</div>

    
      

    
      

    
      
    
      
  <div class="widget">
    <h3 class="widget-title">归档</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/12/">十二月 2022</a><span class="archive-list-count">3</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/2022/12/29/Vue%E5%85%AB%E8%82%A1%E6%96%87(31-60)/" class="title">Vue八股文31-60</a>
              </p>
              <p class="item-date">
                <time datetime="2022-12-29T06:48:08.998Z" itemprop="datePublished">2022-12-29</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/2022/12/26/Vue%E5%85%AB%E8%82%A1%E6%96%87(1-30)/" class="title">Vue八股文1-30</a>
              </p>
              <p class="item-date">
                <time datetime="2022-12-26T12:43:43.699Z" itemprop="datePublished">2022-12-26</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/2022/12/26/hello-world/" class="title">Hello World</a>
              </p>
              <p class="item-date">
                <time datetime="2022-12-26T11:23:12.435Z" itemprop="datePublished">2022-12-26</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  <div class="content">
  <article id="post-Vue八股文(31-60)" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      Vue八股文31-60
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/2022/12/29/Vue%E5%85%AB%E8%82%A1%E6%96%87(31-60)/" class="article-date">
	  <time datetime="2022-12-29T06:48:08.998Z" itemprop="datePublished">2022-12-29</time>
	</a>
</span>
        
        

        

        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/2022/12/29/Vue%E5%85%AB%E8%82%A1%E6%96%87(31-60)/#comments" class="article-comment-link">评论</a></span>
        
      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <h3 id="31-你工作中有没有封装比较好的组件？"><a href="#31-你工作中有没有封装比较好的组件？" class="headerlink" title="31. 你工作中有没有封装比较好的组件？"></a>31. 你工作中有没有封装比较好的组件？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">网上找些好的组件</span><br></pre></td></tr></table></figure>

<h3 id="32-说说Vue插槽的作⽤和平时开发中的应⽤？"><a href="#32-说说Vue插槽的作⽤和平时开发中的应⽤？" class="headerlink" title="32. 说说Vue插槽的作⽤和平时开发中的应⽤？"></a>32. 说说Vue插槽的作⽤和平时开发中的应⽤？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">插槽的作⽤:</span><br><span class="line">1）⽀持在⽗组件⾃定义⼦组件中的个内容</span><br><span class="line">2）让⼦组件更具有通⽤性，不必限定死某个内容</span><br><span class="line"></span><br><span class="line">插槽平时开发中的应⽤:</span><br><span class="line">1）在封装组件时，如果组件中的某个内容是动态的或不确定的，就可以使⽤插槽来代替了。</span><br><span class="line">2）在使⽤第三⽅库时，往往会通过使⽤插槽类⾃定义第三⽅组件中的某些内容。</span><br></pre></td></tr></table></figure>

<h3 id="33-⽗⼦组件的⽣命周期顺序"><a href="#33-⽗⼦组件的⽣命周期顺序" class="headerlink" title="33. ⽗⼦组件的⽣命周期顺序"></a>33. ⽗⼦组件的⽣命周期顺序</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">加载渲染过程： ⽗beforeCreate -&gt; ⽗created -&gt; ⽗beforeMount -&gt; ⼦beforeCreate -&gt; ⼦created -&gt; ⼦beforeMount -&gt;⼦mounted -&gt; ⽗mounted</span><br><span class="line"></span><br><span class="line">⼦组件更新过程：⽗beforeUpdate -&gt; ⼦beforeUpdate -&gt; ⼦updated -&gt; ⽗updated</span><br><span class="line"></span><br><span class="line">⽗组件更新过程：⽗beforeUpdate -&gt; ⽗updated</span><br><span class="line"></span><br><span class="line">销毁过程：⽗beforeDestroy -&gt; ⼦beforeDestroy -&gt; ⼦destroyed -&gt; ⽗destroyed</span><br></pre></td></tr></table></figure>

<h3 id="34-什么是Composition-API-和-Options-API？"><a href="#34-什么是Composition-API-和-Options-API？" class="headerlink" title="34. 什么是Composition API 和 Options API？"></a>34. 什么是Composition API 和 Options API？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Composition API 是⼀组 API，允许我们使⽤导⼊的函数⽽不是声明选项来编写 Vue 组件。它是⼀个涵盖以下 API 的总称：Reactivity API、Lifecycle Hooks、Dependency Injection等等</span><br><span class="line">使⽤Composition API编写组件时可以根据逻辑功能来组织代码。⽐如可以把⼀个功能所⽤到的API 放在⼀起，这样可以让代码⾼内聚和低耦合，进⽽提⾼了代码的逻辑的复⽤性。</span><br><span class="line">在 Vue 3 中，它也主要与script setup语法⼀起使⽤。</span><br><span class="line"></span><br><span class="line">Options API是指在对应的属性中编写对应的功能模块, ⽐如data定义数据、methods中定义⽅法、computed中定</span><br><span class="line">义计算属性、watch中监听属性改变，也包括⽣命周期钩⼦</span><br><span class="line">弊端: 当我们实现某⼀个功能时，这个功能对应的代码逻辑会被拆分到各个属性中,当组件变得复杂，导致对应属性的列表也会增⻓，这可能会导致组件难以阅读和理解</span><br></pre></td></tr></table></figure>

<h3 id="35-Composition-API和之Options-API有什么区别"><a href="#35-Composition-API和之Options-API有什么区别" class="headerlink" title="35. Composition API和之Options API有什么区别?"></a>35. Composition API和之Options API有什么区别?</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">1）在逻辑组织和逻辑复⽤⽅⾯，Composition API是优于Options API。</span><br><span class="line">2）Composition API⼏乎是函数，会有更好的类型推断，对于TS的⽀持更友好。</span><br><span class="line">3）Composition API对 tree-shaking 友好，代码也更容易压缩。</span><br><span class="line">4）Composition API中⻅不到this的使⽤，减少了this指向不明的情况。</span><br><span class="line">5）Composition API⽤起来稍微复杂⼀点，⽽Options API就⾮常简单、易于使⽤。</span><br></pre></td></tr></table></figure>

<h3 id="36-说说Vue3中setup函数的作⽤？"><a href="#36-说说Vue3中setup函数的作⽤？" class="headerlink" title="36. 说说Vue3中setup函数的作⽤？"></a>36. 说说Vue3中setup函数的作⽤？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">在Vue3中， setup() 函数充当了组件编写Composition API 的⼊⼝点。setup函数参数主要有两个参数：</span><br><span class="line">1）第⼀个参数：props , ⽗组件传递过来的属性会被放到props对象中</span><br><span class="line">2）第⼆个参数：context, 它⾥⾯包含三个属性：</span><br><span class="line">attrs：所有的⾮prop的attribute；</span><br><span class="line">slots：⽗组件传递过来的插槽；</span><br><span class="line">emit：当我们组件内部需要发出事件时会⽤到emit（因为我们不能访问this，所以不可以通过 this.$emit发出事件）</span><br><span class="line"></span><br><span class="line">可以在setup中可以定义响应式数据、⽅法、计算属性、侦听器等等。</span><br><span class="line">可以通过setup的返回值来替代data选项，让数据可以直接在template中使⽤。</span><br></pre></td></tr></table></figure>

<h3 id="37-ref和reactive有什么区别？开发中如何选择？"><a href="#37-ref和reactive有什么区别？开发中如何选择？" class="headerlink" title="37. ref和reactive有什么区别？开发中如何选择？"></a>37. ref和reactive有什么区别？开发中如何选择？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">ref和reactive都是响应式的API，都可以⽤来定义响应式的数据。</span><br><span class="line">ref可以包裹任意数据类型，reactive只能包裹复杂数据类型，⽐如对象、数组。</span><br><span class="line"></span><br><span class="line">ref返回⼀个ref对象，在script中取值需要通过value属性，但是在模板中使⽤会进⾏解包不需要调⽤value。</span><br><span class="line">reactive包裹的是复杂数据类型，直接取⾥⾯的属性即可。</span><br><span class="line"></span><br><span class="line">ref⼏乎可以应⽤在任何场景，⽽且包含reactive适合的场景</span><br><span class="line">reactive的应⽤场景⽐较受限，第⼀：值⽐较固定，第⼆：值与值之间是有联系的。</span><br><span class="line">开发中尽量选择ref</span><br></pre></td></tr></table></figure>

<h3 id="38-Composition-API常⻅的⼏个函数与⽤法？"><a href="#38-Composition-API常⻅的⼏个函数与⽤法？" class="headerlink" title="38. Composition API常⻅的⼏个函数与⽤法？"></a>38. Composition API常⻅的⼏个函数与⽤法？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">ref：包裹任意类型的值，将包裹的值加⼊响应式</span><br><span class="line"></span><br><span class="line">reactive：包裹复杂类型的值，将包裹的值加⼊响应式</span><br><span class="line"></span><br><span class="line">computed：把⼀些复杂逻辑⽤computed进⾏包裹，如同Options API中的计算属性⼀样，computed会⾃动收集相关依赖，当依赖发⽣变化时，会⾃动进⾏更新</span><br><span class="line"></span><br><span class="line">⽣命周期：Vue3中想要在beforeCreate和created中做的事，直接在setup中做即可，Vue3的其他的⽣命周期函数都要在前⾯加⼀个on，然后需要在vue中主动引⼊</span><br><span class="line"></span><br><span class="line">watch：</span><br><span class="line">1）watch可以监听单个数据源，也可以监听多个数据源</span><br><span class="line">2）watch是懒执⾏，第⼀次是不会执⾏的，除⾮你为其提供第三个参数中的immediate属性为true</span><br><span class="line">3）watch只有等到监听的数据源发⽣了变化后，才会执⾏第⼆个参数（回调）</span><br><span class="line">4）watch可以获取监听数据源的前后变化的值</span><br><span class="line">5）侦听多个数据源的时候，第⼀个参数是数组类型</span><br><span class="line"></span><br><span class="line">watchEﬀect：</span><br><span class="line">1）watchEﬀect会⾃动收集依赖，收集的依赖是第⼀个参数，也就是回调函数中有哪些东⻄是加⼊响应式的</span><br><span class="line">2）如果这个值加⼊了响应式就会被收集起来，当被收集的值发⽣了变化，就会重新执⾏这个回调函数</span><br><span class="line">3）watchEﬀect第⼀次执⾏是在DOM挂载前执⾏的，所以如果你想在第⼀次执⾏时拿到DOM元素</span><br><span class="line">4）需要传⼊第⼆个参数，第⼆个参数是⼀个对象，让其ﬂush属性的值为post即可</span><br><span class="line"></span><br><span class="line">toRefs：</span><br><span class="line">1）对reactive进⾏解构后就失去了响应式的效果，因为reactive返回的是⼀个Proxy对象</span><br><span class="line">2）对Proxy对象进⾏解构，拿到的是纯净的值，所以没有了响应式的效果</span><br><span class="line">3）如果想要对reactive进⾏解构，需要对其包裹⼀个toRefs</span><br><span class="line">4）这么做相当于为reactive中的每⼀个值包裹了⼀个ref</span><br></pre></td></tr></table></figure>

<h3 id="39-Vue3中的watch和watchEﬀect有什么区别？"><a href="#39-Vue3中的watch和watchEﬀect有什么区别？" class="headerlink" title="39. Vue3中的watch和watchEﬀect有什么区别？"></a>39. Vue3中的watch和watchEﬀect有什么区别？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">watch和watchEﬀect都⽤⽤来侦听响应式数据的变化，watch可以侦听指定的源，默认第⼀次不会执⾏，watchEﬀect虽不能指定侦听的源，但是会⾃动收集依赖，并默认会先执⾏⼀次。</span><br><span class="line"></span><br><span class="line">watch：</span><br><span class="line">1）watch可以监听单个数据源，也可以监听多个数据源</span><br><span class="line">2）watch是懒执⾏，第⼀次是不会执⾏的，除⾮你为其提供第三个参数中的immediate属性为true</span><br><span class="line">3) watch只有等到监听的数据源发⽣了变化后，才会执⾏第⼆个参数（回调）</span><br><span class="line">4) watch可以获取监听数据源的前后变化的值</span><br><span class="line">5) 侦听多个数据源的时候，第⼀个参数是数组类型</span><br><span class="line"></span><br><span class="line">watchEﬀect:</span><br><span class="line">1)watchEﬀect会⾃动收集依赖，收集的依赖是第⼀个参数，也就是回调函数中有哪些东⻄是加⼊响应式的</span><br><span class="line">2)如果这个值加⼊了响应式就会被收集起来，当被收集的值发⽣了变化，就会重新执⾏这个回调函数</span><br><span class="line">3)watchEﬀect第⼀次执⾏是在DOM挂载前执⾏的，所以如果你想在第⼀次执⾏时拿到DOM元素</span><br><span class="line">4)需要传⼊第⼆个参数，第⼆个参数是⼀个对象，让其ﬂush属性的值为post即可</span><br></pre></td></tr></table></figure>

<h3 id="40-说说Vue3中script-setup语法糖常⻅⽤法？"><a href="#40-说说Vue3中script-setup语法糖常⻅⽤法？" class="headerlink" title="40. 说说Vue3中script setup语法糖常⻅⽤法？"></a>40. 说说Vue3中script setup语法糖常⻅⽤法？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">script setup 是在单⽂件组件中使⽤ Composition API 的编译时语法糖，相⽐与之前的setup函数写法，它具有更多的优势：</span><br><span class="line">1）更少的样板内容，更简洁的代码。</span><br><span class="line">2）能够使⽤纯 TypeScript 声明 props 和抛出事件。</span><br><span class="line">3）更好的运⾏时性能 (其模板会被编译成与其同⼀作⽤域的渲染函数，没有任何的中间代理)。</span><br><span class="line">4）更好的 IDE 类型推断性能 (减少语⾔服务器从代码中抽离类型的⼯作)。</span><br><span class="line"></span><br><span class="line">script setup：</span><br><span class="line">1）当使⽤ script setup 的时候，任何在 script setup 声明的顶层绑定都能在模板中直接使⽤</span><br><span class="line">2）声明的顶层绑定：包括变量，函数声明，以及 import 引⼊的内容</span><br><span class="line">3）响应式数据需要通过ref、reactive来创建</span><br><span class="line">4）在script setup中导⼊的组件可以直接使⽤</span><br><span class="line"></span><br><span class="line">deﬁneProps：</span><br><span class="line">1）在script setup语法糖中必须使⽤ deﬁneProps API来声明props，它具备完整的类型推断并且在&lt;script setup&gt; 中是直接可⽤的（不需要额外导⼊）。</span><br><span class="line"></span><br><span class="line">deﬁneEmits：</span><br><span class="line">1）在script setup语法糖中必须使⽤ deﬁneEmits API来声明 emits，它具备完整的类型推断并且在&lt;script setup&gt; 中是直接可⽤的（不需要额外导⼊）。</span><br><span class="line"></span><br><span class="line">deﬁneExpose：</span><br><span class="line">1）获取组件的实例可以通过ref来获取，接着组件挂载完成后可通过value拿到组件实例。</span><br><span class="line">2）当拿到组件实例后，默认是不可以访问这个实例中的⽅法和属性，因为默认没暴露任何⽅法和属性。</span><br><span class="line">3）因此在Vue3组件中可以⽤deﬁneExpose API来暴露⽅法和属性给外部访问。</span><br><span class="line">4）deﬁneExpose 也是不需要导⼊，直接使⽤即可</span><br></pre></td></tr></table></figure>

<h3 id="41-vue-router路由的两种模式"><a href="#41-vue-router路由的两种模式" class="headerlink" title="41. vue-router路由的两种模式"></a>41. vue-router路由的两种模式</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">vue-router中默认使⽤的是hash模式：</span><br><span class="line">1）hash模式，带#。如：http://localhost:8080/#/page。改变hash，浏览器本身不会有任何请求服务器动作。</span><br><span class="line">2）history模式，不带#， 如：&lt;http://localhost:8080/page ，路径没有#。基于HTML5的pushState、replaceState实现。</span><br><span class="line"></span><br><span class="line">hash:</span><br><span class="line">1)有 # 号</span><br><span class="line">2)能够兼容到IE8</span><br><span class="line">3)实际的url之前使⽤哈希字符，这部分url不会发送到服务器，不需要在服务器层⾯上进⾏任何处理</span><br><span class="line">4)刷新不会存在 404 问题</span><br><span class="line">5)不需要服务器任何配置</span><br><span class="line"></span><br><span class="line">history:</span><br><span class="line">1)没有 # 号</span><br><span class="line">2)只能兼容到IE10</span><br><span class="line">3)每访问⼀个⻚⾯都需要服务器进⾏路由匹配⽣成html ⽂件再发送响应给浏览器，消耗服务器⼤量资源</span><br><span class="line">4)浏览器直接访问嵌套路由时，会报 404 问题。</span><br><span class="line">5)需要在服务器配置⼀个回调路由</span><br></pre></td></tr></table></figure>

<h3 id="42-在创建-x2F-挂载-x2F-更新-x2F-销毁阶段，Vue在背后分别做了些什么事儿？"><a href="#42-在创建-x2F-挂载-x2F-更新-x2F-销毁阶段，Vue在背后分别做了些什么事儿？" class="headerlink" title="42. 在创建&#x2F;挂载&#x2F;更新&#x2F;销毁阶段，Vue在背后分别做了些什么事儿？"></a>42. 在创建&#x2F;挂载&#x2F;更新&#x2F;销毁阶段，Vue在背后分别做了些什么事儿？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">Vue的生命周期指的是组件从“生”到“死”的全过程，一共分四个阶段，不同阶段有不同的钩子函数：</span><br><span class="line">* 创建阶段：beforeCreate、created</span><br><span class="line">* 挂载阶段：beforeMount、mounted</span><br><span class="line">* 更新阶段：beforeUpdate、updated</span><br><span class="line">* 销毁阶段：beforeDestroy、destroyed</span><br><span class="line">* 与动态组件有关的两个特殊的钩：activated(激活)、deactivated(休眠)</span><br><span class="line">* 与组件异常捕获有关的一个钩子：errorCaptured</span><br><span class="line"></span><br><span class="line">在beforeCreate之前会声明methods中的方法和声明生命周期钩子函数，这个钩子函数我们用的并不多</span><br><span class="line"></span><br><span class="line">在created之前会注入一些数据，初始化响应式系统，我们通常在这个钩子函数中调接口，获取路由参数等</span><br><span class="line"></span><br><span class="line">在beforeMount之前会通过el $meount template找模板，会把模块变成render函数  调用render函数创建虚拟DOM，虚拟DOM转化成真实DOM，进行挂载，通常这个钩子函数我们也用不到</span><br><span class="line"></span><br><span class="line">在mounted时，已表示真实DOM已挂载完毕，我们在这个钩子中通常调接口，开定时器，DOM操作，建立websocket连接  实例化echarts实例等。</span><br><span class="line"></span><br><span class="line">当数据变化时，会触发beforeUpdate钩子，这个钩子通常也用不到。</span><br><span class="line"></span><br><span class="line">在updated之前，要生成新的虚拟DOM，新的虚拟DOM和老的虚拟DOM进行对比，会执行patch运算，diff算法，找到两个虚拟DOM的最小差异，找到后，进行异步更新，key的目的就是最快找到最小差异，这个钩子也不常用，但是有点类似于watch侦听器或类似于$nextTick()，我们不能在这个钩子中更新数据，会导致死循环。</span><br><span class="line"></span><br><span class="line">当我们手动调用$destory()或路由切换时，会调用beforeDestroy这个钩子函数，我们可以在这个钩子函数中清空定时器，解除事件绑定，清除缓存...</span><br><span class="line"></span><br><span class="line">当组件销毁时，就会移除当前组件的watcher，DOM就无法再更新，移除所有子组件，移除事件监听器，响应式系统就会失效，组件就死亡了，这个钩子函数我们用的也不多。</span><br></pre></td></tr></table></figure>

<h3 id="43-响应式原理，发生在Vue哪些生命周期阶段？"><a href="#43-响应式原理，发生在Vue哪些生命周期阶段？" class="headerlink" title="43. 响应式原理，发生在Vue哪些生命周期阶段？"></a>43. 响应式原理，发生在Vue哪些生命周期阶段？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">在created之前会注入一些数据，初始化响应式系统，我们通常在这个钩子函数中调接口，获取路由参数等</span><br></pre></td></tr></table></figure>

<h3 id="44-虚拟DOM，在哪些阶段生成的？"><a href="#44-虚拟DOM，在哪些阶段生成的？" class="headerlink" title="44. 虚拟DOM，在哪些阶段生成的？"></a>44. 虚拟DOM，在哪些阶段生成的？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">在beforeMount之前会通过el $meount template找模板，会把模块变成render函数  调用render函数创建虚拟DOM，虚拟DOM转化成真实DOM，进行挂载，通常这个钩子函数我们也用不到</span><br><span class="line"></span><br><span class="line">在updated之前，要生成新的虚拟DOM，新的虚拟DOM和老的虚拟DOM进行对比，会执行patch运算，diff算法，找到两个虚拟DOM的最小差异，找到后，进行异步更新，key的目的就是最快找到最小差异，这个钩子也不常用，但是有点类似于watch侦听器或类似于$nextTick()，我们不能在这个钩子中更新数据，会导致死循环。</span><br></pre></td></tr></table></figure>

<h3 id="45-哪些生命周期钩子可以执行多次？哪些执行一次？"><a href="#45-哪些生命周期钩子可以执行多次？哪些执行一次？" class="headerlink" title="45. 哪些生命周期钩子可以执行多次？哪些执行一次？"></a>45. 哪些生命周期钩子可以执行多次？哪些执行一次？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">更新阶段：beforeUpdate、updated </span><br><span class="line">与动态组件有关的两个特殊的钩：activated(激活)、deactivated(休眠)</span><br><span class="line"></span><br><span class="line">上面四个钩子函数执行多次。</span><br></pre></td></tr></table></figure>

<h3 id="46-什么虚拟DOM？"><a href="#46-什么虚拟DOM？" class="headerlink" title="46.什么虚拟DOM？"></a>46.什么虚拟DOM？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">是一个很大的JSON数据，用于描述视图模板的，保存在内存中</span><br></pre></td></tr></table></figure>

<h3 id="47-谈一谈你对-MVVM、MVC、MVP的理解？"><a href="#47-谈一谈你对-MVVM、MVC、MVP的理解？" class="headerlink" title="47. 谈一谈你对 MVVM、MVC、MVP的理解？"></a>47. 谈一谈你对 MVVM、MVC、MVP的理解？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">* MVVM流程 : M数据层 -&gt; VM虚拟DOM层 -&gt; V视图层</span><br><span class="line">* 网页本质 = M数据层 + V视图结构</span><br><span class="line">* M+V是怎么组装的？（ MVC  MVP  MVVM）</span><br><span class="line">* M+V在哪儿组装？（前后端分离、前后端不分离、SSR服务端渲染）</span><br><span class="line">* 进一步理解（阮一峰博客）：https://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html</span><br></pre></td></tr></table></figure>

<h3 id="48-mounted和activated有什么区别？deactivated和beforeDestroy有什么区别？（执行次数、使用场景）"><a href="#48-mounted和activated有什么区别？deactivated和beforeDestroy有什么区别？（执行次数、使用场景）" class="headerlink" title="48. mounted和activated有什么区别？deactivated和beforeDestroy有什么区别？（执行次数、使用场景）"></a>48. mounted和activated有什么区别？deactivated和beforeDestroy有什么区别？（执行次数、使用场景）</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">这两组钩子的区别和使用场景：activated(执行多次) - mounted(执行一次) 、 deactivated(执行多次) - beforeDestroy(执行一次)</span><br><span class="line"></span><br><span class="line">动态组件的作用：</span><br><span class="line">1）有种v-if的感觉，根据指定条件渲染目标组件，它的is属性等于哪个组件，就显示哪个组件。</span><br><span class="line">2）场景：它经常配合keep-alive一起使用。</span><br><span class="line">3）activated(激活)、deactivated(休眠)</span><br><span class="line"></span><br><span class="line">普通组件的挂载与销毁：</span><br><span class="line">1）mounted挂载</span><br><span class="line">2）beforeDestroy将要销毁</span><br></pre></td></tr></table></figure>

<h3 id="49-Vue有哪些内置组件？"><a href="#49-Vue有哪些内置组件？" class="headerlink" title="49.Vue有哪些内置组件？"></a>49.Vue有哪些内置组件？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">插槽、动态组件、过渡动画、component插槽、动态组件、过渡动画、component</span><br></pre></td></tr></table></figure>

<h3 id="50-哪些场景下你会用到动态组件？"><a href="#50-哪些场景下你会用到动态组件？" class="headerlink" title="50. 哪些场景下你会用到动态组件？"></a>50. 哪些场景下你会用到动态组件？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">动态组件也是为了实现条件渲染，在需要使用条件渲染地方，根据不同的组件，渲染不到组件，都可以使用动态组件。</span><br></pre></td></tr></table></figure>

<h3 id="51-在Vue中实现条件渲染渲染有哪些办法？"><a href="#51-在Vue中实现条件渲染渲染有哪些办法？" class="headerlink" title="51.在Vue中实现条件渲染渲染有哪些办法？"></a>51.在Vue中实现条件渲染渲染有哪些办法？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">v-if / v-show / component is</span><br></pre></td></tr></table></figure>

<h3 id="52-路由跳转时如何传递数据？"><a href="#52-路由跳转时如何传递数据？" class="headerlink" title="52. 路由跳转时如何传递数据？"></a>52. 路由跳转时如何传递数据？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">动态路由：</span><br><span class="line">1）path: /user/:id</span><br><span class="line">2）获取动态路由的值的⽅式如下：</span><br><span class="line">3）在template中，直接通过 $route.params获取值</span><br><span class="line">4）在created中，通过 this.$route.params获取值</span><br><span class="line">5）在setup中，使⽤ vue-router库提供的⼀个hook useRoute（该Hook会返回⼀个Route对象，对象中保存着当前路由相关的值）</span><br><span class="line"></span><br><span class="line">query参数:</span><br><span class="line">1）通过query的⽅式来传递参数</span><br><span class="line">2）在界⾯中通过 $route.query 来获取参数</span><br><span class="line">3）在created中，通过 this.$route.query获取值</span><br><span class="line">4）在setup，使⽤ vue-router库提供的⼀个hook useRoute 来获取</span><br></pre></td></tr></table></figure>

<h3 id="53-计算属性有什么作用？（两大作用）"><a href="#53-计算属性有什么作用？（两大作用）" class="headerlink" title="53. 计算属性有什么作用？（两大作用）"></a>53. 计算属性有什么作用？（两大作用）</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">计算属性有什么作用？（两大作用）</span><br><span class="line"></span><br><span class="line">可以研究一下，计算属性的实现原理。找资料，找视频，回答：我之前看过vue的源码，它的计算属性是xxxx实现的。</span><br><span class="line"></span><br><span class="line">* 作用1：当指令的表达式比较复杂时，我们建议使用计算属性来优化，提升视图模板中代码的可阅读性、可维护性。</span><br><span class="line">* 作用2：用于缓存一个复杂的运算，避免组件更新时产生没有必要的性能损耗。计算属性本质上是一个函数，Vue会分析函数体中使用到了哪些声明式变量，有且仅有这些声明式变量发生变化时，计算属性才会重新执行。</span><br></pre></td></tr></table></figure>

<h3 id="54-什么是路由守卫？路由守卫有什么作⽤？"><a href="#54-什么是路由守卫？路由守卫有什么作⽤？" class="headerlink" title="54.什么是路由守卫？路由守卫有什么作⽤？"></a>54.什么是路由守卫？路由守卫有什么作⽤？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">vue-router 提供的路由(导航)守卫主要⽤来通过跳转或取消的⽅式守卫导航。有很多种⽅式植⼊路由导航中：全局的，单个路由独享的，或者组件级的。</span><br><span class="line"></span><br><span class="line">全局导航钩⼦：</span><br><span class="line">1）router.beforeEach(to,from,next)</span><br><span class="line">2）router.afterEach(to,from)</span><br><span class="line">3）...</span><br><span class="line"></span><br><span class="line">组件内的钩⼦:</span><br><span class="line">1）beforeRouteEnter (to, from, next)</span><br><span class="line">2）beforeRouteUpdate (to, from, next)</span><br><span class="line">3）beforeRouteLeave (to, from, next)</span><br><span class="line">4）...</span><br><span class="line"></span><br><span class="line">单独路由独享组件:</span><br><span class="line">1)beforeEnter: (to, from, next)</span><br><span class="line">2)afterEach(to,from)</span><br><span class="line">3)...</span><br><span class="line"></span><br><span class="line">路由守卫有什么作⽤：</span><br><span class="line">1)可以在进⼊路由之前进⾏某些判断，⽐如，检查token是否存在来判断⽤户是否已经登录。</span><br><span class="line">2)可以在路由守卫中进⾏⻚⾯的权限判断，⽐如，判断某个⽤户是否拥有该⻚⾯的权限。</span><br><span class="line">3)也可以⽤来记录⻚⾯的某些信息，⽐如，记录⻚⾯的滚动信息等等。</span><br></pre></td></tr></table></figure>

<h3 id="55-route和router的区别"><a href="#55-route和router的区别" class="headerlink" title="55. route和router的区别"></a>55. route和router的区别</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">route是路由信息对象，在Vue3中通过 useRoute 来获取。</span><br><span class="line">1)包括了path，params，hash，query，fullPath，matched，name等路由信息参数。</span><br><span class="line"></span><br><span class="line">router是路由实例”对象，在Vue3中通过 useRouter 来获取。</span><br><span class="line">1)包括了路由跳转⽅法、钩⼦函数等，⽐如：push、go、back、addRouter、beforeEnter等。</span><br></pre></td></tr></table></figure>

<h3 id="56-vue-中怎么阻止冒泡？怎么阻止默认事件？怎么监听键盘enter键？"><a href="#56-vue-中怎么阻止冒泡？怎么阻止默认事件？怎么监听键盘enter键？" class="headerlink" title="56. vue 中怎么阻止冒泡？怎么阻止默认事件？怎么监听键盘enter键？"></a>56. vue 中怎么阻止冒泡？怎么阻止默认事件？怎么监听键盘enter键？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">阻止冒泡和默认事件：</span><br><span class="line">1）通过事件对象</span><br><span class="line">2）事件修饰符</span><br><span class="line"></span><br><span class="line">监听键盘enter键：</span><br><span class="line">1）通过事件对象</span><br><span class="line">2）通过按键修改符</span><br><span class="line"></span><br><span class="line">&lt;!-- 阻止单击事件继续传播  阻止冒泡--&gt;</span><br><span class="line">&lt;a v-on:click.stop=&quot;doThis&quot;&gt;&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 提交事件不再重载页面  阻止默认事件--&gt;</span><br><span class="line">&lt;form v-on:submit.prevent=&quot;onSubmit&quot;&gt;&lt;/form&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 修饰符可以串联 --&gt;</span><br><span class="line">&lt;a v-on:click.stop.prevent=&quot;doThat&quot;&gt;&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 只有修饰符 --&gt;</span><br><span class="line">&lt;form v-on:submit.prevent&gt;&lt;/form&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 添加事件监听器时使用事件捕获模式 --&gt;</span><br><span class="line">&lt;!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --&gt;</span><br><span class="line">&lt;div v-on:click.capture=&quot;doThis&quot;&gt;...&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 只当在 event.target 是当前元素自身时触发处理函数 --&gt;</span><br><span class="line">&lt;!-- 即事件不是从内部元素触发的 --&gt;</span><br><span class="line">&lt;div v-on:click.self=&quot;doThat&quot;&gt;...&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<h3 id="57-什么是状态管理？什么是单项数据流？"><a href="#57-什么是状态管理？什么是单项数据流？" class="headerlink" title="57. 什么是状态管理？什么是单项数据流？"></a>57. 什么是状态管理？什么是单项数据流？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">在开发中，应⽤程序是需要处理各种各样的数据，这些数据需要保存在应⽤程序中的某⼀个位置，对于这些数据的管理就称之为是 状态管理。以前我们是如何管理应⽤程序的状态？</span><br><span class="line">1）在Vue开发中，我们使⽤组件化的开发⽅式。⽽在组件中我们定义的data或在setup中返回的数据，这些数据我们称之为状态（State）。</span><br><span class="line">2）在模块template中我们可以使⽤这些数据，模块最终会被渲染成DOM，我们称之为View。</span><br><span class="line">3）在模块中我们会产⽣⼀些⾏为事件，处理这些⾏为事件时，有可能会修改State，这些⾏为事件我们称之为Actions。</span><br><span class="line"></span><br><span class="line">其实Vue组件内部的数据是以单向数据流的形式来管理数据的。例如，组件的数据定义在State中，接着在View层使⽤State中的数据，然后View层会产⽣⼀些事件Actions，⽽这些Actions可能会修改State的数据，这就是⼀个单项数据流的概念。</span><br></pre></td></tr></table></figure>

<h3 id="58-什么是Vuex？你使⽤过-Vuex-吗？"><a href="#58-什么是Vuex？你使⽤过-Vuex-吗？" class="headerlink" title="58. 什么是Vuex？你使⽤过 Vuex 吗？"></a>58. 什么是Vuex？你使⽤过 Vuex 吗？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">vuex 是⼀个专为 Vue.js 应⽤程序开发的状态管理模式。每⼀个 Vuex 应⽤的核⼼就是 store（仓库）。“store” 基本上就是⼀个容器，它包含着你的应⽤中⼤部分的状态 ( state )。</span><br><span class="line">1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发⽣变化，那么相应的组件也会相应地得到⾼效更新。</span><br><span class="line">2)改变 store 中的状态的唯⼀途径就是显式地提交 (commit) mutation。这样使得我们可以⽅便地跟踪每⼀个状态的变化。</span><br><span class="line"></span><br><span class="line">Vuex包括⼀下⼏个核⼼模块：</span><br><span class="line">1)State：定义了应⽤状态的数据结构，可以在这⾥设置默认的初始状态。</span><br><span class="line">2)Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到计算属性。</span><br><span class="line">3)Mutation：是唯⼀更改 store 中状态的⽅法，且必须是同步函数。</span><br><span class="line">4)Action：⽤于提交 mutation，⽽不是直接变更状态，可以包含任意异步操作。</span><br><span class="line">5)Module：允许将单⼀的 Store 拆分为多个 store 且同时保存在单⼀的状态树中。</span><br></pre></td></tr></table></figure>

<h3 id="59-v-model-有哪些修饰符？"><a href="#59-v-model-有哪些修饰符？" class="headerlink" title="59. v-model 有哪些修饰符？"></a>59. v-model 有哪些修饰符？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">trim</span><br><span class="line">lazy</span><br><span class="line">number</span><br></pre></td></tr></table></figure>

<h3 id="60-Vue中怎么做动画？"><a href="#60-Vue中怎么做动画？" class="headerlink" title="60.Vue中怎么做动画？"></a>60.Vue中怎么做动画？</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">内置组件transition，使用那6个类名编写自定义动画、使用animate.css第三方动画</span><br></pre></td></tr></table></figure>


      
    </div>
    <div class="article-footer">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="http://bear-peak.gitee.io/2022/12/29/Vue%E5%85%AB%E8%82%A1%E6%96%87(31-60)/" title="Vue八股文31-60" target="_blank" rel="external">http://bear-peak.gitee.io/2022/12/29/Vue八股文(31-60)/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://github.com/cofess" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://github.com/cofess" target="_blank"><span class="text-dark">熊峰</span><small class="ml-1x">Web Developer &amp; Designer</small></a></h3>
        <div>个人简介。</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	
      <div id="vcomments"></div>
    
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    
    <li class="next">
      <a href="/2022/12/26/Vue%E5%85%AB%E8%82%A1%E6%96%87(1-30)/" title="Vue八股文1-30"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
  </ul>
  
  
  
  <div class="bar-right">
    
    <div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,qq,qzone"></div>
    
  </div>
  </div>
</nav>
  


</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/cofess" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="http://weibo.com/cofess" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://twitter.com/iwebued" target="_blank" title="Twitter" data-toggle=tooltip data-placement=top><i class="icon icon-twitter"></i></a></li>
        
        <li><a href="https://www.behance.net/cofess" target="_blank" title="Behance" data-toggle=tooltip data-placement=top><i class="icon icon-behance"></i></a></li>
        
        <li><a href="/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    <div class="copyright">
    	
        <div class="publishby">
        	Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
        </div>
    </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/js/plugin.min.js"></script>


<script src="/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/js/insight.js"></script>






   




   
    
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/valine"></script>
  <script type="text/javascript">
  var GUEST = ['nick', 'mail', 'link'];
  var meta = 'nick,mail,link';
  meta = meta.split(',').filter(function(item) {
    return GUEST.indexOf(item) > -1;
  });
  new Valine({
    el: '#vcomments',
    verify: false,
    notify: false,
    appId: '',
    appKey: '',
    placeholder: 'Just go go',
    avatar: 'mm',
    meta: meta,
    pageSize: '10' || 10,
    visitor: false
  });
  </script>

     







</body>
</html>